<template>
    <div>
      <Nav></Nav>
      <Shopnav></Shopnav>
      <router-view></router-view>
      <p class="xinxi">商品信息</p>
      <div class="d-cont">
        <div class="content-foot">
          <div class="d1">
            <span v-for="item in data">{{item}}</span>
          </div>
          <ul>
            <li v-for="(item,index) in arr">
              <img :src="item.src2" alt="">
              <span class="d3">{{item.txt}}</span>
              <span class="d4">{{item.txt2}}</span>
              <span>{{item.txt3}}{{item.n}}</span>
              <div class="jia">
                <span @click="jian2(index)">-</span>
                <span>{{item.num}}</span>
                <span @click="jia2(index)">+</span>
              </div>
              <span>￥{{item.sum}}</span>
            </li>
          </ul>
          <div class="didi">
            <span>运费</span>
            <span>￥{{sum6}}</span>
            <span>商品金额</span>
            <span>￥{{sum3}}</span>
            <span>商品合计</span>
            <span>￥{{sum5}}</span>
          </div>
        </div>
        <div class="d-fot">
          <div class="d-fot-d1">
            <p>开票信息</p>
            <label>
              <input type="radio" name="mk">不需要
            </label>
            <label>
              <input type="radio" name="mk">个人
            </label>
            <label>
              <input type="radio" name="mk">单位
            </label>
            <div class="d-input">
              <span>发票抬头:</span>
              <input type="text">
              <span class="xing">*<span>请填写后认真核对发票信息</span></span>
            </div>
          </div>
          <div class="d-fot-d2">
            <p>添加订单备注</p>
            <input type="text" placeholder="限45个字，请填写有关商品、支付、发票等信息">
          </div>
        </div>

        <div class="content-foot">
          <div class="d1">
            <span v-for="item in data">{{item}}</span>
          </div>
          <ul>
            <li v-for="(item,index) in arr">
              <img :src="item.src2" alt="">
              <span class="d3">{{item.txt}}</span>
              <span class="d4">{{item.txt2}}</span>
              <span>{{item.txt3}}{{item.n}}</span>
              <div class="jia">
                <span @click="jian2(index)">-</span>
                <span>{{item.num}}</span>
                <span @click="jia2(index)">+</span>
              </div>
              <span>￥{{item.sum}}</span>
            </li>
          </ul>
          <div class="didi">
            <span>运费</span>
            <span>￥{{sum6}}</span>
            <span>商品金额</span>
            <span>￥{{sum3}}</span>
            <span>商品合计</span>
            <span>￥{{sum5}}</span>
          </div>
        </div>
        <div class="d-fot">
          <div class="d-fot-d1">
            <p>开票信息</p>
            <label>
              <input type="radio" name="mk2">不需要
            </label>
            <label>
              <input type="radio" name="mk2">个人
            </label>
            <label>
              <input type="radio" name="mk2">单位
            </label>
            <div class="d-input">
              <span>发票抬头:</span>
              <input type="text">
              <span class="xing">*<span>请填写后认真核对发票信息</span></span>
            </div>
          </div>
          <div class="d-fot-d2">
            <p>添加订单备注</p>
            <input type="text" placeholder="限45个字，请填写有关商品、支付、发票等信息">
          </div>
        </div>

        <div class="d-fot2">
          <p>次日达·礼拜五专享</p>
          <span>选择送达时间:</span>
          <span>{{year2}}年{{moth2}}月{{day2}}日{{hour2}}</span>
          <img src="/static/lyl/rili.png" alt="">
          <span @click="ishow4()">点击修改</span>
          <div v-if="bol4" class="d-ishow">
            <span></span>
            <span></span>
            <ul>
              <li @click="activ2(index)" :class="{'d-act':cur2==index}" v-for="(item,index) in data2">{{item}}</li>
            </ul>
            <button @click="quxiao()">取消</button>
            <button @click="queding()">确定</button>
          </div>
        </div>

        <div class="d-fot3">
          <p>
            <span>实付金额:</span>
            <span>￥{{sum5*2}}</span>
          </p>
          <p>
            <span>订单完成后可获得积分:</span>
            <span>300积分</span>
          </p>
          <router-link to="/dingsucess/3">
            <button @click="chuan()">提交订单</button>
          </router-link>
        </div>

      </div>
      <Footer></Footer>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Footer from '../com/Footer'
  import Shopnav from './Shopnav'
    export default {
      name: "Dingxi",
      data(){
        return {
          sum6:5.3,
          arr:[
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:569,num:1,sum:569},
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:500,num:1,sum:500},
            {src:'/static/lyl/xuan1.png',src2:'/static/lyl/yang.png',txt:'云南蒙自石榴 8个装',txt2:'8个装',txt3:'￥',bol2:true,n:469,num:1,sum:469}
          ],
          data:['爱果果水果店','规格','单价','数量','金额'],
          year2:'',
          moth2:'',
          day2:'',
          hour2:'12:00~3:00',
          data2:['10:00~13:00','11:00~14:00','12:00~15:00','13:00~16:00','14:00~17:00','15:00~18:00','16:00~19:00','17:00~20:00','18:00~21:00','19:00~22:00'],
          cur2:0,
          bol4:false
        }
      },
      mounted(){
        let date = new Date();
        this.year2 = date.getFullYear();
        this.moth2 = date.getMonth() + 1;
        this.day2 = date.getDate();
      },
      methods:{
        jian2(i){
          this.arr[i].num-=1;
          if (this.arr[i].num<0) {
            this.arr[i].num = 0;
          }
          if (this.arr[i].num>0) {
            this.arr[i].bol2 = true;
          }else {
            this.arr[i].bol2 = false;
          }
          this.arr[i].sum = this.arr[i].n*this.arr[i].num;
        },
        jia2(i){
          this.arr[i].num+=1;
          if (this.arr[i].num>0) {
            this.arr[i].bol2 = true;
          }else {
            this.arr[i].bol2 = false;
          }
          this.arr[i].sum = this.arr[i].n*this.arr[i].num;
        },
        activ2(i){
          this.cur2 = i;
        },
        ishow4(){
          this.bol4 = !this.bol4;
        },
        quxiao(){
          this.bol4 = false;
        },
        queding(){
          this.hour2 = this.data2[this.cur2];
          this.bol4 = false;
        },
        chuan(){
          this.$store.commit('changepay',this.sum5*2)
        }
      },
      computed:{
        sum3(){
          var a = 0;
          for (let i = 0; i < this.arr.length; i++) {
            a+=this.arr[i].sum;
          }
          return a;
        },
        sum5(){
          return this.sum6 + this.sum3;
        }
      },
      components:{
        Nav,
        Footer,
        Shopnav
      }
    }
</script>

<style scoped>
  .xinxi{
    width: 1280px;
    margin:20px auto 0;
    color: #666;
    font-size: 18px;
    padding: 20px 0;
    border-top: 1px solid #ccc;
  }
  .d-cont{
    width: 1280px;
    margin:0 auto 38px;
  }
  .content-foot{
    border: 1px solid #e9e9e9;
    margin-bottom: 20px;
  }
  .content-foot .d1{
    background: #f2f2f2;
    padding: 15px 0 15px 60px;
  }
  .content-foot .d1 span{
    font-size: 16px;
    margin-right: 147px;
  }
  .content-foot .d1 span:nth-child(1){
    margin-right: 320px;
  }
  .content-foot .d1 span:nth-child(5){
    margin-right: 0;
  }
  .content-foot ul li{
    padding: 20px 0 20px 60px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
  }
  .content-foot ul li span{
    font-size: 14px;
    color: #666;
    align-self: center;
  }
  .content-foot ul li .d3{
    margin-right: 190px;
  }
  .content-foot ul li .d4{
    margin-right: 140px;
  }
  .content-foot ul li>img{
    width: 80px;
    height: 80px;
    border: 1px solid #e9e9e9;
    margin-right: 20px;
  }
  .content-foot ul li .jia{
    display: flex;
    margin: 0 110px;
  }
  .content-foot ul li .jia span{
    width: 28px;
    height: 28px;
    border: 1px solid #e9e9e9;
    text-align: center;
    line-height: 28px;
    font-size: 16px;
    color: #666;
    margin: 0;
    background: #f2f2f2;
    cursor: pointer;
  }
  .content-foot ul li .jia span:nth-child(2){
    width: 48px;
    background: #fff;
    border-right: 0;
    border-left: 0;
  }
  .content-foot .didi{
    padding: 30px 30px 30px 0;
    text-align: right;
  }
  .content-foot .didi span{
    font-size: 18px;
  }
  .content-foot .didi span:nth-child(2n+1){
    margin-left: 40px;
  }
  .content-foot .didi span:nth-child(2n+2){
    color: #ff5757;
    margin-left: 20px;
  }

  .d-fot .d-fot-d1 p{
    border-top: 1px solid #e9e9e9;
    padding: 20px 0;
    font-size: 18px;
    color: #666;
  }
  .d-fot .d-fot-d1 label{
    font-size: 14px;
    color: #666;
    margin-right: 40px;
    cursor: pointer;
  }
  .d-fot .d-fot-d1 label input{
    margin-right: 10px;
    cursor: pointer;
  }
  .d-fot .d-fot-d1 .d-input{
    padding: 20px 0;
    border-bottom: 1px solid #e9e9e9;
  }
  .d-fot .d-fot-d1 .d-input span{
    font-size: 14px;
  }
  .d-fot .d-fot-d1 .d-input input{
    width: 370px;
    height: 35px;
    border:1px solid #e9e9e9;
    margin-right: 20px;
  }
  .d-fot .d-fot-d1 .d-input .xing{
    color: #f28200;
  }
  .d-fot .d-fot-d2{
    padding-bottom: 30px;
    border-bottom: 1px solid #e9e9e9;
    margin-bottom: 20px;
  }
  .d-fot .d-fot-d2 p{
    padding: 20px 0;
    font-size: 18px;
    color: #666;
  }
  .d-fot .d-fot-d2 input{
    width: 627px;
    height: 35px;
    border: 1px solid #e9e9e9;
    font-size: 14px;
    color: #999;
    padding-left: 10px;
  }
  .d-fot2 p{
    font-size: 18px;
    color: #498e3d;
    padding-bottom: 20px;
  }
  .d-fot2 span{
    font-size: 16px;
  }
  .d-fot2 span:nth-child(2){
    margin-right: 20px;
  }
  .d-fot2 span:nth-child(3){
    margin-right: 30px;
  }
  .d-fot2 img{
    width: 20px;
    vertical-align: bottom;
    margin-right: 10px;
  }
  .d-fot2 span:nth-child(5){
    color: #498e3d;
    cursor: pointer;
  }
  .d-ishow{
    position: relative;
    width: 508px;
    height: 115px;
    padding: 20px;
    border: 1px solid #e9e9e9;
    background: #f8fff7;
    margin-left: 128px;
    text-align: center;
    margin-top: 20px;
  }
  .d-ishow span:nth-child(1){
    position: absolute;
    top: -20px;
    border-bottom: 10px solid #e9e9e9;
    border-right: 10px solid #fff;
    border-left: 10px solid #fff;
    border-top: 10px solid #fff;
  }
  .d-ishow span:nth-child(2){
    position: absolute;
    top: -19px;
    border-bottom: 10px solid #f8fff7;
    border-right: 10px solid rgba(0,0,0,0);
    border-left: 10px solid rgba(0,0,0,0);
    border-top: 10px solid rgba(0,0,0,0);
  }
  .d-ishow ul{
    display: flex;
    flex-wrap: wrap;
    border-left: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
  }
  .d-ishow ul li{
    width: 20%;
    box-sizing: border-box;
    font-size: 14px;
    color: #666;
    border-bottom: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
    background: #fff;
    height: 30px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }
  .d-ishow ul li:hover{
    background: #0ef;
    color: #fff;
  }
  .d-ishow ul .d-act{
    background: #f00;
    color: #fff;
  }
  .d-ishow button{
    width: 90px;
    height: 30px;
    border-radius: 5px;
    font-size: 14px;
    color: #fff;
    background: #999;
    margin-top: 20px;
    cursor: pointer;
  }
  .d-ishow button:nth-child(5){
    background: #f08200;
    margin-left: 30px;
  }

  .d-fot3{
    text-align: right;
    border-top: 1px solid #e9e9e9;
    margin-top: 20px;
  }
  .d-fot3 p{
    margin: 30px 0;
  }
  .d-fot3 p span{
    font-size: 16px;
  }
  .d-fot3 p span:nth-child(2){
    color: #f08200;
    font-size: 18px;
  }
  .d-fot3 button{
    width: 150px;
    height: 50px;
    background: #f08200;
    color: #fff;
    font-size: 20px;
    border-radius: 5px;
    cursor: pointer;
  }
</style>
